<script setup>
	import {
		ref,
		onMounted,
	} from "vue";

	import {
		navigateToSignIn,
		navigateToCalendar,
		navigateToSearch,
		redirectToMy,
		redirectToCreate,
		navigateToArticle,
		redirectToPeople,
		navigateToLeaveMessage,
		navigateToMemorialHall,
		navigateToTodaySacrifice,
		navigateToUpToDateSacrifice,
		navigateToArticleList,
		navigateToWishingTree,
	} from "@/assets/scripts/navigate.js"
	import {
		getMsgApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		listTabooApi,
		articleTypeApi,
		articleType2Api,
		articleListApi,
		consumptionChecklistApi,
		carouselApi,
	} from '@/assets/api/tarbar/home.js'

	// 组件
	import titleColumn from '@/components/titleColumn.vue'
	import todaySacrificeCard from '@/components/todaySacrificeCard.vue'
	import upToDateSacrificeCard from '@/components/upToDateSacrificeCard.vue'
	import articleCard from '@/components/articleCard.vue'
	import leaveMessageCard from '@/components/leaveMessageCard.vue'
	import bottomTabBar from '@/components/bottomTabBar.vue'
	import mySacrificeCard from '@/components/mySacrificeCard.vue'

	const bannerList = ref([])
	const bannerCurrent = ref(0)
	const todaySacrificeList = ref([])
	const propleSacrificeList = ref([])
	const upToDateSacrificeList = ref([])
	const mySacrificeList = ref([])
	const articleTabList = ref([])
	const articleList = ref([])
	const leaveMessageList = ref([])
	const consumptionCheckList = ref([])
	const articleCurrent = ref(0)

	const lineBg =
		"";

	const banner_handleClick = (index) => {
		// navigateToArticle(bannerList.value[index].id)
	}

	const banner_handleChange = (e) => {
		// console.log(e);
		bannerCurrent.value = e.current
	}

	const articleSwiper_handleChange = (event) => {
		articleCurrent.value = event.detail.current
	}
	const articleTab_handleChange = (event) => {
		articleCurrent.value = event.index
	}

	onMounted(() => {
		mySacrificeList_init()
		todaySacrificeList_init()
		propleSacrificeList_init()
		upToDateSacrificeList_init()
		leaveMessageList_init()
		articleList_init()
		consumptionCheckList_init()
		bannerList_init()
	})

	const mySacrificeList_init = async () => {
		const res = await listTabooApi(1)
		if (res.code === 200) {
			mySacrificeList.value = res.rows
		}
	}

	const todaySacrificeList_init = async () => {
		const res = await listTabooApi(2)
		if (res.code === 200) {
			todaySacrificeList.value = res.rows
		}
	}

	const propleSacrificeList_init = async () => {
		const res = await listTabooApi(3)
		if (res.code === 200) {
			propleSacrificeList.value = res.rows
		}
	}

	const upToDateSacrificeList_init = async () => {
		const res = await listTabooApi(4)
		if (res.code === 200) {
			upToDateSacrificeList.value = res.rows
		}
	}

	const leaveMessageList_init = async () => {
		const res = await getMsgApi("")
		if (res.code === 200) {
			leaveMessageList.value = res.rows
		}
	}

	const bannerList_init = async () => {
		const res = await carouselApi()
		if (res.code === 200) {
			bannerList.value = res.rows
		}
	}

	const articleList_init = async () => {
		const typeRes = await articleType2Api()
		if (typeRes.code !== 200) {
			return
		}
		articleTabList.value = typeRes.rows.map(item => {
			item.name = item.atName
			return item
		})
		for (var i = 0; i < articleTabList.value.length; i++) {
			const element = articleTabList.value[i]
			const res = await articleListApi(element.id)
			if (res.code === 200) {
				articleList.value.push(res.rows)
			} else {
				articleList.value.push([])
			}
		}
	}

	const consumptionCheckList_init = async () => {
		const res = await consumptionChecklistApi()
		if (res.code === 200) {
			consumptionCheckList.value = res.rows
		}
	}
</script>

<template>
	<view class="bg-grey-fill">
		<uv-navbar :fixed="false" left-icon="首页" leftIconSize="32rpx" leftIconColor="#666">
			<!-- <template #left>
				<uni-icons type="calendar" size="30" color="#666" @click="navigateToCalendar"></uni-icons>
			</template> -->
			<template #right>
				<uni-icons type="medal" size="30" color="#666" @click="navigateToSignIn"></uni-icons>
			</template>
			<template #center>
				<uv-row class="inp-search" @click="navigateToSearch">
					<uv-col>
						<uv-input shape='circle' placeholder="输入名字搜索" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" border="none" disabled
							:customStyle="{background:'#f2f2f2', padding:'3px 10px'}"></uv-input>
					</uv-col>
				</uv-row>
			</template>
		</uv-navbar>

		<uv-row v-show="false" class="px-normal bg-white">
			<uv-col>
				<uv-swiper :current='bannerCurrent' :list="bannerList.map(o=>o.imgUrl)" @change="banner_handleChange"
					duration="4000" @click="banner_handleClick" indicator indicatorMode="dot" circular autoplay
					acceleration></uv-swiper>
			</uv-col>
		</uv-row>

		<uv-row class="px-normal bg-white">
			<uv-col>
				<view class="banner-box">
					<view v-if="bannerList.length" class="banner-box-content">
						<image :src="bannerList[0].imgUrl" mode="widthFix" class="image ">
						</image>
					</view>
					<uv-transition v-for="(item, index) in bannerList" :key='index' :show="bannerCurrent === index">
						<view class="banner-box-item">
							<image :src="item.imgUrl" mode="widthFix" class="image ">
							</image>
						</view>
					</uv-transition>
				</view>
			</uv-col>
		</uv-row>

		<uv-row class="px-normal bg-white pt-normal">
			<uv-col>
				<uv-notice-bar :text="consumptionCheckList.map(o=>o.tex)" direction="column" bgColor='#cef6ea'
					color='#444' :customStyle="{'border-radius': '19px'}"></uv-notice-bar>
			</uv-col>
		</uv-row>

		<uv-row class="px-normal bg-white pt-normal">
			<uv-col>
				<uv-grid :col="3">
					<uv-grid-item @click="redirectToMy">
						<image src="@/assets/pic/home-btn-1.png" mode="aspectFill" class="image btn-icon">
						</image>
						<text class="grid-text">我的纪念馆</text>
					</uv-grid-item>
					<uv-grid-item @click="redirectToCreate">
						<image src="@/assets/pic/home-btn-2.png" mode="aspectFill" class="image btn-icon">
						</image>
						<text class="grid-text">创建纪念馆</text>
					</uv-grid-item>
					<uv-grid-item @click="redirectToPeople">
						<image src="@/assets/pic/home-btn-3.png" mode="aspectFill" class="image btn-icon">
						</image>
						<text class="grid-text">名人纪念馆</text>
					</uv-grid-item>
				</uv-grid>
			</uv-col>
		</uv-row>

		<uv-row class="px-normal pt-normal bg-white" :gutter="8" justify="space-between">
			<uv-col :span='6' @click="navigateToWishingTree">
				<image class="home-ad" src="@/assets/pic/home-ad-11.gif" mode="widthFix"></image>
			</uv-col>
			<uv-col :span='6'>
				<image class="home-ad" src="@/assets/pic/home-ad-12.gif" mode="widthFix"></image>
			</uv-col>
		</uv-row>

		<!-- 我的纪念馆 -->
		<uv-row class="p-normal bg-white">
			<uv-col>
				<titleColumn @clickMore="redirectToMy">
					<template #title>
						<view>我的纪念馆</view>
					</template>
					<template #content>
						<uv-empty mode="list" class="mb-normal" icon="empty-favor"
							v-if="!mySacrificeList.length"></uv-empty>
						<view class="mb-normal" v-for="(item, index) in mySacrificeList.filter((o,i)=>i<5)"
							:key="index">
							<mySacrificeCard :data="item" @click="navigateToMemorialHall(item.id)"></mySacrificeCard>
						</view>
						<view class="pb-small">
							<uv-button type="success" @click="redirectToCreate" text="免费创建新纪念馆"></uv-button>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>

		<!-- 今日生祭 -->
		<uv-row class="p-normal pt-small bg-white mt-normal">
			<uv-col>
				<titleColumn @clickMore="navigateToTodaySacrifice">
					<template #title>
						<view>今日生祭</view>
					</template>
					<template #content>
						<uv-empty mode="list" class="mb-normal" icon="empty-favor"
							v-if="!todaySacrificeList.length"></uv-empty>
						<view class="pb-small">
							<uv-row class="mb-normal" v-for="(item,index) in todaySacrificeList.filter((o,i)=>i<5)"
								:key="index">
								<uv-col>
									<todaySacrificeCard :data="item" @click="navigateToMemorialHall(item.id)">
									</todaySacrificeCard>
								</uv-col>
							</uv-row>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>

		<!-- 今日生祭 -->
		<uv-row class="px-normal pt-normal bg-white">
			<uv-col>
				<image class="home-ad" src="@/assets/pic/home-ad2.gif" mode="widthFix"></image>
			</uv-col>
		</uv-row>

		<!-- 英雄纪念馆 -->
		<uv-row class="p-normal pt-small bg-white mt-normal">
			<uv-col>
				<titleColumn @clickMore="redirectToPeople">
					<template #title>
						<view>英雄纪念馆</view>
					</template>
					<template #content>
						<view class="pb-small">
							<uv-empty mode="list" class="mb-normal" icon="empty-favor"
								v-if="!propleSacrificeList.length"></uv-empty>
							<uv-row>
								<uv-col :span="3" v-for="(item,index) in propleSacrificeList.filter((o,i)=>i<4)"
									:key="index" @click="navigateToMemorialHall(item.id)">
									<view class="p-small avatar">
										<image :src="item.mmImg1" mode="scaleToFill" class="image image-fill">
										</image>
									</view>
									<view class="d-flex d-flex-jcc mt-small">
										{{item.mmName1}}
									</view>
								</uv-col>
							</uv-row>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>

		<!-- 最新纪念馆 -->
		<uv-row class="p-normal pt-small bg-white mt-normal">
			<uv-col>
				<titleColumn @clickMore="navigateToUpToDateSacrifice">
					<template #title>
						<view>最新纪念馆</view>
					</template>
					<template #content>
						<view class="pb-small">
							<uv-empty mode="list" class="mb-normal" icon="empty-favor"
								v-if="!upToDateSacrificeList.length"></uv-empty>
							<uv-row class="mb-normal" v-for="(item,index) in upToDateSacrificeList.filter((o,i)=>i<5)"
								:key="index" @click="navigateToMemorialHall(item.id)">
								<uv-col>
									<upToDateSacrificeCard :data="item">
									</upToDateSacrificeCard>
								</uv-col>
							</uv-row>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>

		<!-- 文章 -->
		<uv-row class="p-normal pt-small bg-white mt-normal">
			<uv-col>
				<uv-tabs :list="articleTabList" :current="articleCurrent" :scrollable="false" :lineHeight="10"
					:activeStyle="{transform:'scale(1.2)', color:'#111'}" :lineColor="`url(${lineBg}) no-repeat`"
					lineBgSize="100%" @change="articleTab_handleChange"></uv-tabs>
				<swiper class="mt-normal swiper" circular :indicatorDots="false" :current="articleCurrent"
					@change="articleSwiper_handleChange">
					<swiper-item v-for="(item, index) in articleList" :key="index">
						<view v-for="(obj, jIndex) in item.filter((o,i)=>i<5)" :key="jIndex"
							@click="navigateToArticle(obj.id)">
							<articleCard :style="{'border-bottom-width':jIndex==item.length-1?'0':'1px'}" :data="obj">
							</articleCard>
						</view>
					</swiper-item>
				</swiper>
				<uv-button class="mt-normal" type="success" @click="navigateToArticleList" text="查看更多"></uv-button>
			</uv-col>
		</uv-row>

		<!-- 留言列表 -->
		<uv-row class="p-normal pt-small mt-normal">
			<uv-col>
				<titleColumn @clickMore="navigateToLeaveMessage">
					<template #title>
						<view>留言列表</view>
					</template>
					<template #content>
						<view class="pb-small">
							<uv-empty mode="list" class="mb-normal" icon="empty-favor"
								v-if="!leaveMessageList.length"></uv-empty>
							<uv-row class="mb-normal" v-for="(item,index) in leaveMessageList.filter((o,i)=>i<5)"
								:key="index" @click="navigateToMemorialHall(item.meMemorialId)">
								<uv-col>
									<leaveMessageCard :data="item"></leaveMessageCard>
								</uv-col>
							</uv-row>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>

		<!-- 底部导航栏 -->
		<bottomTabBar current='0'></bottomTabBar>
	</view>
</template>

<style lang="scss" scoped>
	.banner-box {
		position: relative;
		border-radius: 10px;
		overflow: hidden;

		.banner-box-content .image {
			width: 100%;
			opacity: 0;
		}

		.banner-box-item {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.image {
				width: 100%;
			}
		}
	}

	.inp-search {
		width: calc(100% - 120px);
		box-sizing: border-box;
	}

	.home-ad {
		width: 100%;
		display: block;
	}

	.btn-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 5px;
		border-radius: 50%;
	}

	.avatar {
		width: 75px;
		height: 100px;
	}

	.swiper {
		height: calc(83px * 5);

		.swiper-item {
			height: 83px;
		}
	}
</style>